@import "./css/HarmonyOS_Font.css";
@import "./css/apercu.css";
@import "css/code/code.css";
@import "css/fancybox.css";
@import "@/assets/css/post.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --font-color: 0deg 0% 15%;
    --font-alpha: 100%;
    --s-color: hsl(var(--font-color) / var(--font-alpha));
    --f-color: hsl(0deg 0% 100% / .9);
    --icon-color: rgb(168 162 158);
    --icon-color-hover: hsl(359deg 83% 75%);
    --main-color: var(--custom-main-hue, 359deg) var(--custom-main-sat, 83%) var(--custom-main-lig, 62%);
    --subs-color: var(--custom-subs-hue, 17deg) var(--custom-subs-sat, 95%) var(--custom-subs-lig, 70%);
    --font-weight-normal: 400;
    --font-weight-title: 600;
    --font-size-normal: 1rem;
    --font-size-medium: .875rem;
    --font-size-small: .75rem;
    --font-size-title: 1rem;
    --font-spacing: .01em;
    --font-family: var(--custom-fonts, none), Noto Sans SC, PingFang SC, system-ui, sans-serif, iconfont;
    --font-family-slogn: wenfeng-kksjt, 快看世界体, var(--font-family);
    --font-family-title: var(--font-family);
    --font-family-coder: Monaco, Consolas, var(--font-family);
    --text-shadow: 0 .04rem .2rem rgb(0 0 0 / 30%);
    /* 距离 */
    --nav-height: 4rem;
    --gap-divs: 1.5rem;
    --gap-span: 1rem;
    --gap-area: 3rem;
    --edge-tb: var(--nav-height);
    --edge-lr: 3rem;
    --card-size: 22.5rem;
    gap: var(--gap-divs);
    --cover-top: var(--nav-height);
    --bg-primary: #F8F8F8;

    /* 区块 */
    --radius: 1rem;
    --rounded-small: 4px;
    --rounded-normal: 8px;
    --content-size: 62.5rem;
    --border: thin solid hsl(var(--font-color) / .1);
    --vip-border: 0.1rem solid #fcd34d;
    --user-panel: 20rem;
    --user-panel-padding: 1.5rem;
    --box-shadow: 0 .2rem 1rem 0 hsl(0deg 0% 15% / 10%);
    --box-shadow-white: 0 .2rem 1rem 0 hsl(0deg 0% 15% / 4%);
    --bg: hsl(var(--font-color) / 4%);
    --h-bg: hsl(0deg 0% 98%);
    --w-bg: white;
    --n-bg: transparent;
    --scroll-mask: linear-gradient(#0000, #000 var(--gap-divs), #000 calc(100% - var(--gap-divs)), #0000);

    --animation-on: cubic-bezier(.6, .1, 0, 1);
    --animation-in: cubic-bezier(.6, .2, .25, 1);
    --animation: opacity .5s var(--animation-in) backwards, transform 1s var(--animation-in) backwards, filter .7s var(--animation-in);
}

.site-footer {
    --custom-main-hue: 359deg;
    --custom-main-sat: 83%;
    --custom-main-lig: 62%;
    --custom-subs-hue: 17deg;
    --custom-subs-sat: 95%;
    --custom-subs-lig: 70%;
}

.apercu {
    font-family: apercu, sans-serif;
}

/* =Global
----------------------------------------------- */
*, *::before, *::after {
    font-family: "HarmonyOSHans-Regular", "Segoe UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";;
    color: inherit;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--font-color) / .1) #0000;
}

/* 链接样式 */
a {
    cursor: pointer;
    transition: .7s cubic-bezier(.6, .1, 0, 1), background-position 0s;
}

blockquote, q {
    quotes: "" "";
    hyphens: none;
}

blockquote {
    margin-top: 2em;
    padding: .75em 1em;
    gap: 2em;
    border: 0;
    border-radius: 1em;
    background: var(--bg);
    columns: var(--card-size);
    column-rule: thin solid hsl(var(--font-color) / .1);
    column-fill: balance;
    widows: 1;
    break-inside: avoid;
}

blockquote::before {
    font-family: iconfont, serif;
    content: "\e65d";
    display: block;
    font-size: 1.5em;
    color: hsl(var(--font-color) / .2);
    margin-block: -1em .5em;
    line-height: 1;
    column-span: all;
}

blockquote p {
    margin-block: 0 1em;
    font-size: .9em;
}

blockquote cite {
    color: hsl(var(--font-color) / .5);
    font-size: var(--font-size-small);
    column-span: all;
}

blockquote cite::before {
    content: "——";
    margin: 0 .2em 0 0;
}

table {
    border-collapse: separate !important;
    border-spacing: 0;
    margin: 0 auto 1em;
}

table > * {
    font-family: apercu, sans-serif !important;
}

table th, table td {
    border-right: 1px solid #222;
    border-bottom: 1px solid #222;
}

table th, table td {
    padding: clamp(8px, 2vw, 16px);
    border-top: 1px solid #222;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 2;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

table th:first-child, table td:first-child {
    border-left: 1px solid #222;
}

table tr:first-child td {
    font-weight: 600;
}

table tr:first-child td:first-child, table tr:first-child th:first-child {
    border-top-left-radius: var(--rounded-normal);
}

table tr:first-child td:last-child, table tr:first-child th:last-child {
    border-top-right-radius: var(--rounded-normal);
}

table tr:last-child td:first-child {
    border-bottom-left-radius: var(--rounded-normal);
}

table tr:last-child td:last-child {
    border-bottom-right-radius: var(--rounded-normal);
}

/* =自定义
----------------------------------------------- */
.icon-copyright::before {
    font-family: iconfont, serif;
    content: "\e6b5";
    margin-right: .5em;
}

.swiper-reverse {
    animation: animation-15 180s reverse linear infinite;
    animation-play-state: running;
}

.swiper-forwards {
    animation: animation-15 180s forwards linear infinite;
    animation-play-state: running;
}

.animation-paused\:hover:hover {
    animation-play-state: paused;
}

@keyframes animation-15 {
    0% {
        transform: translateX(0);
    }

    to {
        transform: translateX(-200%);
    }
}

@keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 定义旋转动画 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

:where(.postContent,.about-content) > :where(p, pre, address, blockquote, figure, details, iframe, audio, video, h1, h2, h3, h4, h5, h6, ul, ol) {
    margin-block: 1em;
    font-size: 1rem;
}

:where(.postContent,.about-content) > h2 {
    font-size: 1.5rem;
}

:where(.postContent,.about-content) > h3 {
    font-size: 1.35rem;
}

.about-content ul {
    list-style: inside;
    padding-left: 10px;
}

.notice-content > * {
    display: flex;
    max-width: -webkit-fill-available;
}

.notice-content img {
    height: 240px;
    width: auto;
    display: flex;
}

.mask {
    background: rgba(0, 0, 0, .2);
    z-index: 9;
    transition: opacity .15s linear;
}

.iconColor {
    color: var(--icon-color);
}

.iconColor:hover {
    color: var(--icon-color-hover);
}

.friendList {
    grid: auto / repeat(auto-fill, minmax(min(var(--card-size), 100%), 1fr));
}

/*
*AMAP 地图样式
*===============================================*/
#maps.amap-container {
    position: absolute;
    inset: 0;
    background-image: none;
    transition: 1s cubic-bezier(.6, .2, .25, 1);
}

#maps.amap-container.loaded {
    opacity: 1;
    transform: none;
}

.amap-controls, .maps-name {
    position: absolute;
    display: flex;
    align-items: center;
    font-size: var(--font-size-small);
    line-height: 1;
    gap: 1em;
    width: fit-content;
    max-width: calc(100% - var(--gap-divs) * 2);
    inset: var(--gap-divs) auto auto var(--gap-divs);
    padding: 1em;
    margin: auto;
    border: var(--border);
    border-radius: 2em;
    background: var(--s-bg, hsl(0 0% 100% / .6));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: var(--box-shadow-white);
    z-index: 30;
    overflow: auto;
    white-space: nowrap;
}

.amap-controls {
    inset: auto var(--gap-divs) var(--gap-divs);
}

.amap-control,
.amap-controls :is(ul, span),
.amap-scalecontrol,
.amap-ctrl-list-layer {
    all: unset;
}

.amap-controls :is(ul, li, span) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: inherit !important;
}

.amap-toolbar span {
    width: 2em;
    font-size: 1.25em;
    margin: -.5em 0 -.5em .25em;
    line-height: 2;
    background: var(--bg) !important;
    border-radius: 50% !important;
    border: 0 !important;
    user-select: none;
}

.amap-controls [type="radio"],.amap-controls [type="checkbox"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-small);
    line-height: 1;
    padding: 1em;
    border-radius: 2em;
    gap: .5em;
    cursor: pointer;
    user-select: none;
    flex: none;
    vertical-align: middle;
    appearance: none;
}
.amap-controls [type="radio"]:not(:checked),.amap-controls [type="checkbox"]:not([hidden]):not(:checked) {
    background-position-x: 125%;
    box-shadow: var(--box-shadow-white);
}
.amap-controls [type="radio"],.amap-controls [type="checkbox"] {
    color: #fff;
    background: linear-gradient(135deg, var(--bg) 20%, hsl(var(--main-color) / .8) 30%, hsl(var(--subs-color) / .8) 70%, var(--bg) 80%) 50% / 300% 100%;
    box-shadow: 0 0 1em 0 hsl(var(--main-color) / .2), 0 .5em 1em -0.5em hsl(var(--main-color) / .5);
    padding: 0;
    outline: var(--border);
}

.amap-control input {
    --bg: hsl(var(--font-color) / 4%);
    --border: thin solid hsl(var(--font-color) / .1);
    width: 3em;
    height: 1em;
    margin: 0 -.5em 0 0;
}
.amap-logo {
    display: none !important;
}
/*media
=================================================*/
@media (width <= 641px) {
    #menu-open:checked ~ .menu-out {
        opacity: 1;
        transform: none;
        visibility: visible;
        pointer-events: auto;
    }
}

@media (max-width: 1152px) {
    :root {
        --edge-lr: 1.5rem;
        --cover-top: 30vh;
        --cover-size: auto;
    }
}
